<template>
  <div class="app-container">
    <div class="container-bg">
      <el-tabs class="config_box" v-model="tabValue" @tab-click="tabClick">
        <el-tab-pane label="时间设置" name="timeSet">
          <time-set v-if="tabValue == 'timeSet'" :info="timeSet"></time-set>
        </el-tab-pane>
        <el-tab-pane label="显示设置" name="monitorConfig">
          <monitor-config
            v-if="tabValue == 'monitorConfig'"
            :info="showInfo"
          ></monitor-config>
        </el-tab-pane>
        <el-tab-pane label="存储设置" name="saveSet">
          <save-set v-if="tabValue == 'saveSet'" :info="showInfo"></save-set>
        </el-tab-pane>
        <el-tab-pane label="音频设置" name="audioSet">
          <audio-set v-if="tabValue == 'audioSet'"></audio-set>
        </el-tab-pane>
        <el-tab-pane label="恢复出厂" name="resetDevice">
          <reset-device v-if="tabValue == 'resetDevice'"></reset-device>
        </el-tab-pane>
        <el-tab-pane label="重启设备" name="restartDevice">
          <restart-device v-if="tabValue == 'restartDevice'"></restart-device>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-tabs v-model="tabValue" @tab-click="tabClick">
        <el-tab-pane
          v-for="item in tabList"
          :key="item.id"
          :label="item.name"
          :name="item.route"
        >
        </el-tab-pane>
      </el-tabs> -->
    </div>
  </div>
</template>

<script>
import timeSet from "./components/timeSet.vue";
import monitorConfig from "./components/monitorConfig.vue";
// import logConfig from "./components/logConfig.vue";
import saveSet from "./components/saveSet.vue";
import audioSet from "./components/audioSet.vue";
import resetDevice from "./components/resetDevice.vue";
import restartDevice from "./components/restartDevice.vue";
export default {
  components: {
    timeSet,
    monitorConfig,
    // logConfig,
    saveSet,
    audioSet,
    resetDevice,
    restartDevice,
  },
  data() {
    return {
      tabValue: "timeSet",
      timeSet: {},
      showInfo: {},
      machineList: [],
      tabList: [
        {
          id: 1,
          component: timeSet,
          name: "时间设置",
        },
        {
          id: 2,
          component: monitorConfig,
          name: "显示设置",
        },
      ],
    };
  },
  created() {
    if (this.$route.query.step) {
      this.tabValue = this.$route.query.step;
    }
  },
  methods: {
    tabClick(e) {
      // console.log(this.tabValue);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__header {
  margin: 0 0 30px;
}
</style>
